<template>
    <div class="swiper" >
        <swiper class="swiperB" :options="swiperOption" ref="mySwiperA" v-if="!!swiperImg">
            <!-- 幻灯内容 -->
            <swiper-slide  class="swiperC" @click="songerM3(index)" v-for="item,index in imgList">
            	<div class="swiperImg" >
      				<img :src="item.avatar_middle" />
            	</div>
            </swiper-slide>
            <!-- 以下控件元素均为可选 -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar"  slot="scrollbar"></div>
        </swiper>
    </div>
</template>

<script>
    import Vue from 'vue';
    import swiper from 'vue-awesome-swiper';
	Vue.use(swiper)
    import jsonp from "jsonp";
    export default{
        data(){
            return {
                swiperOption: {
                    // 所有配置均为可选（同Swiper配置）
                    notNextTick: true,
                    loop:true,
                    autoplay: 3000,
                    grabCursor : true,
                    setWrapperSize :true,
                    autoHeight: true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next',
                    mousewheelControl : true,
                    observeParents:true,
                },
                swiperImg:"",
            }
        },
		computed:{
			imgList(){
				return this.swiperImg.artist;	
			},
		},
		components:{
			
		},
		methods:{ 
			songerM3(index){
				this.$router.push("/songerM3");
				this.$store.commit("singerId",this.MusicSinger.artist[index].ting_uid);
			}
		},
        created(){
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.swiperImg){//判断之前是否已经存储了swiperImg信息
                var tem = JSON.parse(sessionStorage.swiperImg);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000){//判断存储信息的时间和当前时间的距离是否小于1小时
                    this.swiperImg = tem.data;
//                  console.log( this.swiperImg);
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.get72HotArtist&format=jsonℴ=1&offset=0&limit=6",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem){
                        this.swiperImg = tem.data;//如果请求失败就用之前存储的值
                    }
                }else{
                    sessionStorage.swiperImg = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.swiperImg = res;
                }
            })
        }
    }

</script>

<style scoped lang="scss">
    @import "../assets/swiper.min.css";
    .swiper{
    	width: 100%;
    	height: 100%;
    	margin-top: 2%;
    	.swiperB{
    	    width: 100%;
    	    height: 100%;
    	    .swiperC{
    	    	width: 100%;
    	    	height: 100%;
    	    	.swiperImg{
    	    		width: 100%;
    	    		height: 100%;
    	    		img{
    	    			width: 100%;
    	    		}
    	    	}
    	    }
    	}
    }

</style>